<template>
  <div class="role_part">
    <!-- 搜索组件 -->
    <SearchaRole :plh_a="placeholdera" :plh_b="placeholderb" :url="addurl" :name="name"></SearchaRole>
    <!-- 表格 -->
    <el-table
	border
	ref="multipleTable"
	:data="tableData"
	tooltip-effect="dark"
	style="width: 100%"
	@selection-change="handleSelectionChange"
    >
    <el-table-column align="center" type="selection" width="55"> </el-table-column>
    <el-table-column align="center" prop="name" label="角色名称" width="300" sortable></el-table-column>
    <el-table-column align="center" prop="code" label="角色代码" width="300" sortable> </el-table-column>
    <el-table-column align="center" prop="time" label="修改时间" show-overflow-tooltip sortable width="300"></el-table-column>
    <el-table-column align="center" prop="updata" label="修改人" width="300" sortable> </el-table-column>
    <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button size="mini" type="success" @click="dataPower(scope.$index, scope.row)">数据权限</el-button>
		</template>
    </el-table-column>
    </el-table>

    <!-- 数据权限弹窗 -->
    <el-dialog
    title="数据权限"
    :visible.sync="show"
    width="30%">
    <span>暂无数据...</span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="show = false">确 定</el-button>
    </span>
    </el-dialog>


	<!-- 编辑弹窗 -->
	<Dialog :list="list" :url="url" :name="name"></Dialog>

    <!-- 分页组件 -->
    <Pagination :num="lists.length" router="/system/role/"></Pagination>
  </div>
</template>



<style lang="scss">
	.el-table {
		.el-table_1_column_6 {
			.cell {
				text-align: center;
			}
		}
	}
</style>




<script>
import Pagination from "@c/Pagination";
import SearchaRole from "@c/Searcha-role";
import Dialog from "@c/Dialog";

export default {
  components: { SearchaRole, Pagination, Dialog },
  data() {
    return {
		title: "角色管理",
		placeholdera: "请输入角色名称",
		placeholderb: "请输入角色代码",
		tableData: [],
		lists: [],
		list: {},
		// 修改接口
		url: '/system/role/updata',
        addurl: '/system/role/add',
		name: [ '角色名称', '角色代码', ],
		// 弹窗
		dialog: false,
        // 权限
        show: false
    };
  },
  created() {
    this.$store.commit("title", this.title);
    // this.$store.commit('dialog', this.dialog)
	this.getData();
	this.getDatas();

	
  },
  methods: {
	// 请求数据的方法
	getData() {
		let { params } = this.$route
		this.$http.get('/system/role', { params })
			.then(({data}) => {
				this.tableData = data.data
			})
			
	},
	getDatas() {
		this.$http.get('/system/roles')
			.then(({data}) => {
				this.lists = data.data
			})
			
	},
        // 数据权限
    dataPower(index, data) {
        this.show = true;
    },
    handleSelectionChange() {},
	//   编辑
	handleEdit(index, data) {
    	this.$store.state.dialog = true;
		// console.log(data);
		this.list = data;
	},
	//   删除
	handleDelete(index, data) {

		// console.log(data);
		this.$confirm('确定要删除吗？', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
		.then(() => {
			this.$http.get('/system/role/delete', { params: {_id: data._id}})
				.then(({ data }) => {
					if(!data.errno) {
						this.$message({
							message: data.msg,
							type: 'success'
						})
						setTimeout(() => {
							this.$router.go(0)
						},1000)
					}
				})
			}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
	}
	  
  },
	watch: {
		$route() {
			this.getData()
		}
	}
};
</script>